
<template>
  <div class="">
    <el-dialog
      :title="isEdit ? '修改管理员' : '添加管理员'"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
      :before-close="close"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="80px"
        class="demo-ruleForm"
      >
        <el-form-item label="账号" prop="username" style="margin-left: 110px">
          <el-input v-model="ruleForm.username" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass" style="margin-left: 110px">
          <el-input
            v-model="ruleForm.pass"
            style="width: 200px"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="pass2" style="margin-left: 110px">
          <el-input
            v-model="ruleForm.pass2"
            style="width: 200px"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name" style="margin-left: 110px">
          <el-input v-model="ruleForm.name" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="tel" style="margin-left: 110px">
          <el-input
            v-model.number="ruleForm.tel"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="角色" prop="name" style="margin-left: 110px">
          <el-select
            v-model="ruleForm.typeid"
            placeholder="请选择"
            style="width: 200px"
          >
            <el-option
              v-for="item in selectList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-left: 110px">
          <el-button type="primary" @click="submitForm('ruleForm')"
            >确定</el-button
          >
          <el-button @click="close()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { Addadministrator, administratorrole } from "../../api/administrator";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {
    centerDialogVisible: {
      type: Boolean,
    },
    item: {
      type: Object,
    },
    isEdit: {
      type: Boolean,
    },
  },
  data() {
    //   密码验证
    const pwdCheck = async (rule, value, callback) => {
      if (!value) {
        return callback(new Error("密码不可为空"));
      } else {
        callback();
      }
    };
    // 重复密码验证
    const pwdAgainCheck = async (rule, value, callback) => {
      if (!value) {
        return callback(new Error("重复密码不能为空！"));
      } else if (this.ruleForm.pass != this.ruleForm.pass2) {
        return callback(new Error("两次输入密码不一致！"));
      } else {
        callback();
      }
    };
    //这里存放数据
    return {
      ruleForm: {
        id: 0,
        username: "",
        pass: "",
        pass2: "",
        name: "",
        tel: "",
        typeid: null,
      },
      rules: {
        username: [{ required: true, message: "请输入账号", trigger: "blur" }],
        pass: [{ required: true, validator: pwdCheck, trigger: "blur" }],
        pass2: [{ required: true, validator: pwdAgainCheck, trigger: "blur" }],
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        tel: [{ required: true, message: "请输入手机号", trigger: "blur" }],
      },
      selectList: [],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let data = await Addadministrator(this.ruleForm);
          console.log(data);
          if (data.errCode == "10000") {
            if (this.isEdit !== true) {
              this.$message.success("添加成功");
              this.close();
            } else if (this.isEdit !== false) {
              this.$message.success("修改成功");
              this.close();
            }
          } else {
            return false;
          }
        } else {
          return false;
        }
      });
    },

    //添加的角色
    async Administratorrole() {
      let data = await administratorrole({
        page: 1,
        psize: 6,
      });
      this.selectList = data.data.list;
    },

    close() {
      this.ruleForm = {
        username: "",
        pass: "",
        pass2: "",
        name: "",
        tel: "",
        typeid: null,
      };
      this.$emit("close", false);
    },
  },
  watch: {
    item: {
      immediate: true,
      handler(newVal) {
        this.ruleForm = JSON.parse(JSON.stringify(newVal));
      },
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.Administratorrole();
    console.log(this.isEdit);
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
</style>